<template>
	<view class="introScroll">
		<view class="topView">
			<!-- 城市搜索输入框 -->
			<view class="serchView">
				<view class="serch">
					<image class="serchIconImage" src="../static/images/img_search_log.png"></image>
					<input @input="cityInputListener" adjust-position="false" class="serchInput"
						placeholder="输入城市名称进行搜索" type="text" />
				</view>
			</view>
			<!-- 定位城市-标题 -->
			<view class="nowCityTextTipsView">
				<text class="nowLocationCity">当前定位城市</text>
			</view>
			<!-- 定位城市-内容 -->
			<view class="againLocationView">
				<text class="loactionText" @click="curCity(nowCity)">{{nowCity}}</text>
				<text class="loactionStatusText">{{locationStatus}}</text>
				<image :animation="animation" @click="locationImageClick" class="refreshImage"
					src="../static/images/refreshIcon.png"></image>
			</view>
		</view>
		<!-- 右侧字母 -->
		<view class='city_right'>
			<text class='initial_item' v-for='(item,index) in initial' :key='index'
				@tap.stop='initialTap(index)'>{{item}}</text>
		</view>
		<scroll-view scroll-with-animation="true" class="cityListView" scroll-y="true" :scroll-into-view="scrollId">
			<!-- 热门城市 -->
			<text class="hotCityTips" :id="'re'">热门城市</text>
			<view class='new_city_box'>
				<text class='new_city_text' v-for='(item,index) in hotCityList' :key='index'
					@tap.stop='cityTap(index)'>{{item.regionName}}</text>
			</view>
			<!-- 城市列表 -->
			<view class="forCityView">
				<view class="forCityItem" v-for="(item,index) in allCityList" :key="index">
					<view v-if="item.show" :id="item.initial" class="initialItemFirst">{{item.initial}}</view>
					<text @click="cityItemClick(index)" class="itemCityContent">{{item.regionName}}</text>
					<view v-if="!item.last" class="line"></view>
				</view>
			</view>
		</scroll-view>
	</view>
</template>


<script>
	import {
		getlistasd,
		getHotCity
	} from "@/api/api.js";
	import {
		getCityId,
		getLocation,
		getLocationII
	} from '@/filters/commFilter.js'
	export default {
		data() {
			return {
				nowCity: '',
				locationStatus: '定位成功',
				initial: ['热', "A", "B", "C", "D", "E", "F", "G", "H", "I", "J", "K", "L", "M", "N", "O", "P", "Q", "R",
					"S", "T",
					"U", "V", "W", "X", "Y", "Z"
				],
				hotCityName: ['北京', '天津', '上海', '杭州', '南京', '广州', '深圳', '武汉', '成都', '厦门'],
				//热门城市
				hotCityList: [],
				//全部城市
				allCityList: [],
				//滑动到指定位置
				scrollId: '',
				//动画
				animation: {},
				//接口请求的数据
				cityList: [],
				curCityData: {},
				bs: 'd',
				eventChannel: this.getOpenerEventChannel()
			}
		},

		onLoad(options) {
			//设置title标题
			this.nowCity = ''
			this.bs = options.bs;
			// console.log("opbs",options.bs)
			// this.hotCityList = this.returnHotCity()

			//获取全国城市
			this.cityData();
			//获取开通城市
			this.getHotCityData();


		},
		watch: {
			nowCity(newVal) {
				uni.setNavigationBarTitle({
					title: '当前城市-' + newVal
				})
			}
		},
		methods: {
			//获取城市区域tree结构的列表
			async cityData() {
				let that = this
				try {
					let {
						data
					} = await getlistasd();
					that.getCityList(data)
				} catch (e) {
					// console.log(e)
					//TODO handle the exception
				} finally {
					// this.handleData(this.$city)
				}
			},
			getHotCityData() {
				getHotCity().then(res => {
					console.log("hotCityres", res);
					if (res.data) {
						res.data.forEach(item => {
							this.hotCityList.push({
								regionName: item.cityName,
								regionId: item.city
							})
						})
					}
					// this.hotCityList = res;
				})
			},
			//拼音点击事件
			initialTap(index) {
				// console.log(index)
				if (this.initial[index] == '热') {
					this.scrollId = 're'
				} else {
					this.scrollId = this.initial[index]
				}
			},
			curCity(curCity) {
				// uni.$emit('chooseCity', {
				// 	data: this.curCityData,
				// 	bs: this.bs,
				// 	isReturn: this.curReturn
				// });
				let that = this;
				uni.navigateBack({
					delta: 1,
					success() {
						that.eventChannel.emit('changeSuccess', {
							data: that.curCityData,
							isReturn: that.curCityData.regionName == that.nowCity ? that.curReturn : that
								.returnMeth,
							bs: that.bs
						});
					}
				})

			},
			curReturn(callback) {
				callback && callback()
			},
			//搜索
			cityInputListener(e) {
				let value = e.detail.value
				let cityAll = this.allCityList
				let newArray = []
				for (let i = 0; i < cityAll.length; i++) {
					if (cityAll[i].regionName.indexOf(value) != -1 || cityAll[i].initial == value.toUpperCase()) {
						newArray.push(cityAll[i])
					}
				}
				if (value == '') {
					this.formatCityData(this.cityList)
				} else {
					this.formatCityData(newArray)
				}
			},

			//定位
			locationImageClick() {
				var that = this
				this.animation = uni.createAnimation()
				this.animation.rotate(360).step()
				this.animation = this.animation.export()
				this.locationStatus = '定位中...'
				getCityId().then(city => {
					that.nowCity = city.countyName[2];
					that.locationStatus = '定位成功'
					that.curCityData = that.cityList.filter(item => item.regionName.indexOf(that.nowCity) != -1)[
						0];
				});
				// uni.getLocation({
				// 	geocode: true, // 是否解析地址信息（返回详细格式化地址信息）
				// 	success: res => {
				// 		console.log('ddkk',res,this.$location)
				// 		// 获取当前位置坐标
				// 		if (res.address != undefined) {
				// 			that.nowCity = res.address.city;
				// 			that.locationStatus = '定位成功'
				// 		}
				// 	},
				// 	fail: res => {
				// 		that.nowCity = '获取定位信息失败'
				// 		console.log("获取定位信息失败");
				// 	}
				// });

			},

			//获取城市列表	
			getCityList(data) {
				this.cityList = data;
				this.locationImageClick()
				this.formatCityData(data)
			},

			formatCityData: function(array) {
				let hotCity = []
				for (let i = 0; i < array.length; i++) {
					if (i == 0) {
						//第一条显示首字母
						array[i].show = true
					} else if (array[i].initial != array[i - 1].initial) {
						//首字母与上一条不一样需要显示
						array[i].show = true
						array[i - 1].last = true
					}
					if (array.length == 1) {
						array[0].last = true
					}

					if (this.hotCityName.indexOf(array[i].regionName.substring(0, 2)) !== -1) {
						hotCity.push(array[i])
					}
					array.show = false
				}
				// this.hotCityList = hotCity
				this.allCityList = array
			},

			//城市条目点击
			cityItemClick(index) {
				let that = this;
				var data = this.allCityList[index]
				console.log('test', data, this.nowCity)
				uni.navigateBack({
					delta: 1,
					success() {
						that.eventChannel.emit('changeSuccess', {
							data,
							isReturn: data.regionName == that.nowCity ? that.curReturn : that.returnMeth,
							bs: that.bs
						});
						// uni.$emit('chooseCity', {
						// 	data,
						// 	isReturn: data.regionName ==that.nowCity? that.curReturn: that.returnMeth,
						// 	bs:that.bs
						// });
					}
				})
			},
			returnMeth(callback) {
				let that = this;
				this.$nextTick(() => {
					uni.showModal({
						title: '提示',
						cancelText: "不切换",
						confirmText: '切换',
						content: '定位显示您在' + that.nowCity,
						success: function(res) {
							if (res.confirm) {
								callback && callback();
							} else if (res.cancel) {
								// console.log("that.nowCity",that.nowCity,that.curCityData)
								that.eventChannel.emit('changeSuccess', {
									data: that.curCityData,
									bs: that.bs
								});
								// uni.$emit('chooseCity', {data:that.curCityData,bs:that.bs});
								// console.log('用户点击取消');
							}

						}
					});
				})


			},
			//热门城市点击
			cityTap(index) {
				let that = this;
				var data = this.hotCityList[index]
				// uni.$emit('chooseCity', {data,isReturn: that.returnMeth,bs:that.bs});
			
				uni.navigateBack({
					delta: 1,
					success() {
						that.eventChannel.emit('changeSuccess', {
							data,
							isReturn: data.regionName == that.nowCity ? that.curReturn : that.returnMeth,
							bs: that.bs
						});
					}
				})
			},



		}
	}
</script>

<style>
	page {
		height: 100%;
		background-color: #F5F5F5;
	}

	.introScroll {
		height: 100%;
		width: 100%;
		display: flex;
		position: relative;
	}

	.topView {
		display: flex;
		flex-direction: column;
		position: fixed;
		z-index: 99;
		width: 100%;
	}

	.serchView {
		width: 100%;
		height: 110rpx;
		display: flex;
		flex-direction: column;
		background-color: #FFFFFF;
		align-items: center;
		justify-content: center;
	}

	.serch {
		width: 690rpx;
		height: 70rpx;
		background: #F7F7F7;
		border-radius: 35rpx;
		display: flex;
		flex-direction: row;
		align-items: center;
	}

	.serchIconImage {
		width: 36rpx;
		height: 32rpx;
		margin-left: 30rpx;
	}

	.serchInput {
		height: 70rpx;
		width: 600rpx;
		margin-left: 12rpx;
		font-size: 30rpx;
		color: #000000;
	}

	.nowCityTextTipsView {
		display: flex;
		flex-direction: column;
		justify-content: center;
		background-color: #F5F5F5;
		height: 50rpx;
		width: 100%;
		padding-bottom: 14rpx;
	}

	.nowLocationCity {
		line-height: 50rpx;
		font-size: 28rpx;
		color: #999999;
		margin-left: 36rpx;
		margin-top: 15rpx;
	}

	.againLocationView {
		height: 88rpx;
		display: flex;
		flex-direction: row;
		align-items: center;
		position: relative;
		width: 100%;
		background-color: #FFFFFF;
	}

	.loactionText {
		font-size: 30rpx;
		color: #129DFF;
		margin-left: 30rpx;
	}

	.loactionStatusText {
		margin-left: 50rpx;
		font-size: 30rpx;
		color: #999999;
	}

	.refreshImage {
		position: absolute;
		right: 48rpx;
		padding: 10rpx;
		width: 40rpx;
		height: 40rpx;
	}

	.cityListView {
		display: flex;
		flex-direction: column;
		height: 100%;
		margin-top: 265rpx;
		position: relative;
		overflow: scroll;
	}

	.city_right {
		z-index: 99;
		width: 60rpx;
		display: flex;
		height: 100%;
		position: absolute;
		right: 0;
		flex-direction: column;
		justify-content: center;
		top: 120rpx;
	}

	.initial_item {
		display: block;
		font-size: 20rpx;
		color: #666;
		text-align: center;
		padding-left: 20rpx;
		padding-top: 3rpx;
		padding-bottom: 3rpx;
		font-weight: bold;
	}

	.hotCityTips {
		margin-left: 30rpx;
		margin-top: 30rpx;
		font-size: 30rpx;
		color: #999999;
	}

	.new_city_box {
		margin-top: 26rpx;
		display: flex;
		flex-wrap: wrap;
		padding: 0 60rpx 0 20rpx;
	}

	.new_city_text {
		width: 114rpx;
		text-align: center;
		font-size: 24rpx;
		line-height: 42rpx;
		color: #333;
		background: #fff;
		border-radius: 21rpx;
		margin: 0 10rpx 20rpx 10rpx;
	}

	.forCityView {
		width: 100%;
		padding-bottom: 30rpx;
	}

	.forCityItem {
		display: flex;
		flex-direction: column;
	}

	.initialItemFirst {
		height: 49rpx;
		padding-left: 40rpx;
		font-size: 30rpx;
		line-height: 49rpx;
		color: #000;
		background: #f7f7f7;
		width: 100%;
	}

	.itemCityContent {
		display: inline-block;
		width: 100%;
		height: 88rpx;
		font-size: 34rpx;
		color: #000000;
		padding-left: 40rpx;
		background-color: #FFFFFF;
		line-height: 88rpx;
	}

	.line {
		width: 642rpx;
		height: 1rpx;
		background-color: #ebebeb;
		margin-left: 40rpx;
	}
</style>